<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='https://unpkg.com/@antv/l7'></script>
    <script src="https://lib.baomitu.com/jquery/2.2.4/jquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        html,
        body {
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="map">

    </div>
    <script>
        var { Scene, GaodeMap } = L7;
        const scene = new Scene({
            id: 'map',
            map: new GaodeMap({
                /* dark|light|normal */
                style: 'normal', // 样式URL
                center: [120.19382669582967, 30.258134],
                pitch: 50,
                zoom: 2,
                // token: '3851594382e218c49865a4d6a5170b52',
            }),
            logoVisible: false
        });
        // json数据：
        var data = [
            {
                lng: 114.30,
                lat: 30.50,
                name: "武汉"
            },
            {
                lng: 118.30,
                lat: 30.50,
                name: "上海"
            }
        ]
        scene.on("loaded", () => {
            // 创建一个点图层
            var point_layer = new L7.PointLayer();
            // 添加数据源，第二个参数告知数据源的格式
            point_layer.source(data, {
                parser: {
                    type: "json",
                    x: 'lng',
                    y: 'lat'
                }
            })
                .size(20)
                .shape("simple")
                .color("#652e80")
                .active(true)
            scene.addLayer(point_layer)
            // 将添加了数据源的图层添加到场景中


            /* LayerPopup */
            // new L7.Popup() 是之前的
            // new一个 new L7.LayerPopup()
            const layer_popup = new L7.LayerPopup({
                // 要添加popup弹窗的图层，放在一个数组中，
                // 每个要添加popup弹窗的图层以一个对象去表示
                items: [
                    {
                        // layer属性是要添加popup弹窗的图层
                        layer: point_layer,
                        // field属性是popup弹窗中的字段。
                        // name: 武汉  name:上海 
                        // 把data数据中的name字段拿过来
                        fields: ["name"]
                    }
                ],
                // 触发方式
                trigger: "hover"
            })
            // 把popup层添加到图层中
            scene.addPopup(layer_popup)
        })
    </script>
</body>

</html>